import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { history } from 'umi';
import { Modal, Table, Row, Col } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import styles from './index.less';
import LineEcharts from './echarts/index';
// import explain from '@/assets/mainWindow/videoGame/icon_info.png';
const TestOverLoad = () => {
  const [baseDates, setBaseDates] = useState([
    {
      name: '续航时间(h)',
      content: '15.14',
    },
    {
      name: '平均功耗(mW)',
      content: '0.00',
    },
    {
      name: ' 归一化电流(mA)',
      content: '100.00',
    },
    {
      name: 'GPU频率(MHZ)',
      content: '17',
    },
    {
      name: '充电状态',
      content: '108(108/0/0)',
    },
  ]);
  //无效数据
  const invalidColum = [
    {
      title: '序号',
      dataIndex: 'sequence',
      key: 'sequence',
    },
    {
      title: '时长',
      dataIndex: 'duration',
      key: 'duration',
    },
    {
      title: '开始时间',
      dataIndex: 'beginTime',
      key: 'beginTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
    {
      title: '操作',
      dataIndex: 'name',
      key: 'name',
      render: () => <span>删除</span>,
    },
  ];
  const [invalidData, setInvalidData] = useState([]);
  // 场景信息
  const sceneInfoColum = [
    {
      title: '序号',
      dataIndex: 'sequence',
      key: 'sequence',
    },
    {
      title: '场景名称',
      dataIndex: 'sceneName',
      key: 'sceneName',
    },
    {
      title: '有效时长',
      dataIndex: 'effectiveTime',
      key: 'effectiveTime',
    },
    {
      title: '开始时间',
      dataIndex: 'beginTime',
      key: 'beginTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
    {
      title: '续航时间(h)',
      dataIndex: 'FPS',
      key: 'FPS',
    },
    {
      title: '平均功耗(mW)',
      dataIndex: 'FPS',
      key: 'FPS',
    },
    {
      title: ' 归一化电流(mA)',
      dataIndex: 'FPS',
      key: 'FPS',
    },
    {
      title: 'GPU频率(MHZ)',
      dataIndex: 'FPS',
      key: 'FPS',
    },
    {
      title: '充电状态',
      dataIndex: 'FPS',
      key: 'FPS',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: () => <span>删除</span>,
    },
  ];
  const [sceneInfoData, setSceneInfoData] = useState([]);
  // 视频播放
  const [isVideoVisbie, setIsVideoVisbie] = useState(false);

  // 打开视频
  const onOpenModal = () => {
    setIsVideoVisbie(true);
  };
  return (
    <>
      <div className={styles.base_Information}>
        <div className={styles.base_header}>
          <div className={styles.base_header_bar}></div>
          <div className={styles.base_header_title}>基本信息</div>
        </div>
        <div className={styles.base_dates}>
          {baseDates.map((item, index) => {
            return (
              <div className={styles.base_indicator}>
                <div className={styles.indicator_title}>{item.name}</div>
                <div className={styles.indicator_date}>{item.content}</div>
              </div>
            );
          })}
        </div>
      </div>
      <div className={styles.base_disposal}>
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>
            数据处理{' '}
            <QuestionCircleOutlined
              onClick={onOpenModal}
              style={{ margin: '0 4px' }}
            />
          </div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates}>
          <Row>
            <Col span={8} style={{ padding: 24 }}>
              <div className={styles.dates_header}>
                <div className={styles.header_title}>无效数据</div>
                <div className={styles.header_button}>新增</div>
              </div>
              <div>
                <Table
                  columns={invalidColum}
                  dataSource={[]}
                  pagination={null}
                />
              </div>
            </Col>
            <Col span={16} style={{ padding: 24 }}>
              <div className={styles.dates_right_header}>
                <div className={styles.header_title}>场景信息</div>
                <div className={styles.header_button}>新增</div>
              </div>
              <div>
                <Table
                  columns={sceneInfoColum}
                  dataSource={[]}
                  pagination={null}
                />
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <LineEcharts />
      <div className={styles.cardTitle}>
        <span>指标统计</span>
      </div>
      <Table columns={[]} dataSource={[]} pagination={null} />
      {isVideoVisbie && (
        <Modal
          title="视频播放"
          open={isVideoVisbie}
          width={'90%'}
          onCancel={() => setIsVideoVisbie(false)}
          footer={null}
        >
          <video
            muted
            autoPlay={true}
            src="http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
          ></video>
        </Modal>
      )}
    </>
  );
};
export default TestOverLoad;
// export default connect(({  }) => ({  }))(
//   TestPerformance,
// ) ;
